<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺预览</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .banner-slide {
            transition: transform 0.3s ease;
        }
        .preview-mode {
            border: 2px dashed #8b5cf6;
            background: rgba(139, 92, 246, 0.05);
        }
        .edit-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .edit-overlay:hover {
            opacity: 1;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-store-decoration.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">店铺预览</h1>
                <div class="flex items-center space-x-3">
                    <button onclick="toggleEditMode()" class="text-white hover:opacity-80" id="editModeBtn">
                        <i class="fas fa-edit text-lg"></i>
                    </button>
                    <button onclick="sharePreview()" class="text-white hover:opacity-80">
                        <i class="fas fa-share-alt text-lg"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Preview Mode Toggle -->
        <div class="bg-purple-100 border-b border-purple-200 px-4 py-2">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-mobile-alt text-purple-600"></i>
                    <span class="text-sm text-purple-700">手机端预览</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="text-xs text-purple-600" id="editModeStatus">预览模式</span>
                    <button onclick="switchDevice()" class="text-xs bg-purple-600 text-white px-2 py-1 rounded">
                        <i class="fas fa-desktop mr-1"></i>桌面版
                    </button>
                </div>
            </div>
        </div>

        <!-- Store Preview Content -->
        <div class="h-[calc(852px-150px)] overflow-y-auto bg-gray-50" id="previewContent">
            <!-- Banner Section -->
            <div class="relative group" id="bannerSection">
                <div class="bg-white">
                    <div class="relative overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=393&h=200&fit=crop" 
                             alt="轮播图1" class="w-full h-48 object-cover banner-slide" id="bannerImage">
                        <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex space-x-1">
                            <div class="w-2 h-2 bg-white rounded-full opacity-100"></div>
                            <div class="w-2 h-2 bg-white rounded-full opacity-50"></div>
                            <div class="w-2 h-2 bg-white rounded-full opacity-50"></div>
                        </div>
                    </div>
                </div>
                <div class="edit-overlay">
                    <button onclick="editSection('banner')" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium shadow-lg">
                        <i class="fas fa-edit mr-2"></i>编辑轮播图
                    </button>
                </div>
            </div>

            <!-- Navigation Section -->
            <div class="bg-white border-b border-gray-100 relative group" id="navigationSection">
                <div class="p-4">
                    <div class="grid grid-cols-4 gap-3">
                        <div class="text-center">
                            <div class="w-12 h-12 mx-auto bg-blue-100 rounded-xl flex items-center justify-center mb-2">
                                <i class="fas fa-tags text-blue-600"></i>
                            </div>
                            <p class="text-xs text-gray-700">分类</p>
                        </div>
                        <div class="text-center">
                            <div class="w-12 h-12 mx-auto bg-green-100 rounded-xl flex items-center justify-center mb-2">
                                <i class="fas fa-search text-green-600"></i>
                            </div>
                            <p class="text-xs text-gray-700">搜索</p>
                        </div>
                        <div class="text-center">
                            <div class="w-12 h-12 mx-auto bg-orange-100 rounded-xl flex items-center justify-center mb-2">
                                <i class="fas fa-fire text-orange-600"></i>
                            </div>
                            <p class="text-xs text-gray-700">热卖</p>
                        </div>
                        <div class="text-center">
                            <div class="w-12 h-12 mx-auto bg-purple-100 rounded-xl flex items-center justify-center mb-2">
                                <i class="fas fa-percent text-purple-600"></i>
                            </div>
                            <p class="text-xs text-gray-700">优惠</p>
                        </div>
                    </div>
                </div>
                <div class="edit-overlay">
                    <button onclick="editSection('navigation')" class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium shadow-lg">
                        <i class="fas fa-edit mr-2"></i>编辑导航
                    </button>
                </div>
            </div>

            <!-- Coupon Section -->
            <div class="bg-white border-b border-gray-100 relative group" id="couponSection">
                <div class="p-4">
                    <h3 class="text-sm font-medium mb-3">新人专享优惠</h3>
                    <div class="flex space-x-2 overflow-x-auto">
                        <div class="flex-shrink-0 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-lg p-3 text-center min-w-[90px]">
                            <p class="text-sm font-bold">¥20</p>
                            <p class="text-xs mt-1">满99使用</p>
                            <button class="bg-white/20 text-xs px-2 py-1 rounded mt-2">立即领取</button>
                        </div>
                        <div class="flex-shrink-0 bg-gradient-to-r from-orange-500 to-yellow-500 text-white rounded-lg p-3 text-center min-w-[90px]">
                            <p class="text-sm font-bold">¥50</p>
                            <p class="text-xs mt-1">满299使用</p>
                            <button class="bg-white/20 text-xs px-2 py-1 rounded mt-2">立即领取</button>
                        </div>
                        <div class="flex-shrink-0 bg-gradient-to-r from-green-500 to-teal-500 text-white rounded-lg p-3 text-center min-w-[90px]">
                            <p class="text-sm font-bold">8折</p>
                            <p class="text-xs mt-1">满500使用</p>
                            <button class="bg-white/20 text-xs px-2 py-1 rounded mt-2">立即领取</button>
                        </div>
                    </div>
                </div>
                <div class="edit-overlay">
                    <button onclick="editSection('coupon')" class="bg-white text-orange-600 px-4 py-2 rounded-lg font-medium shadow-lg">
                        <i class="fas fa-edit mr-2"></i>编辑优惠券
                    </button>
                </div>
            </div>

            <!-- Product Display Section -->
            <div class="bg-white border-b border-gray-100 relative group" id="productSection">
                <div class="p-4">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-sm font-medium">精选商品</h3>
                        <span class="text-xs text-purple-600">查看更多 <i class="fas fa-chevron-right"></i></span>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="bg-gray-50 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=150&h=120&fit=crop" 
                                 alt="商品1" class="w-full h-28 object-cover">
                            <div class="p-2">
                                <p class="text-xs font-medium text-gray-800 mb-1">无线蓝牙耳机</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-bold text-red-600">¥299</span>
                                    <span class="text-xs bg-green-100 text-green-600 px-1 rounded">热销</span>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=150&h=120&fit=crop" 
                                 alt="商品2" class="w-full h-28 object-cover">
                            <div class="p-2">
                                <p class="text-xs font-medium text-gray-800 mb-1">运动鞋</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-bold text-red-600">¥599</span>
                                    <span class="text-xs bg-orange-100 text-orange-600 px-1 rounded">新品</span>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=150&h=120&fit=crop" 
                                 alt="商品3" class="w-full h-28 object-cover">
                            <div class="p-2">
                                <p class="text-xs font-medium text-gray-800 mb-1">智能手表</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-bold text-red-600">¥1299</span>
                                    <span class="text-xs bg-purple-100 text-purple-600 px-1 rounded">限量</span>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=150&h=120&fit=crop" 
                                 alt="商品4" class="w-full h-28 object-cover">
                            <div class="p-2">
                                <p class="text-xs font-medium text-gray-800 mb-1">笔记本电脑</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-bold text-red-600">¥4999</span>
                                    <span class="text-xs bg-red-100 text-red-600 px-1 rounded">促销</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="edit-overlay">
                    <button onclick="editSection('product')" class="bg-white text-green-600 px-4 py-2 rounded-lg font-medium shadow-lg">
                        <i class="fas fa-edit mr-2"></i>编辑商品展示
                    </button>
                </div>
            </div>

            <!-- Custom Modules Section -->
            <div class="space-y-4 p-4">
                <!-- Video Module -->
                <div class="bg-white rounded-lg p-4 relative group">
                    <h4 class="text-sm font-medium mb-2">视频展示</h4>
                    <div class="bg-gray-200 rounded-lg h-32 flex items-center justify-center">
                        <div class="text-center text-gray-500">
                            <i class="fas fa-play-circle text-3xl mb-2"></i>
                            <p class="text-xs">产品演示视频</p>
                        </div>
                    </div>
                    <div class="edit-overlay">
                        <button onclick="editModule('video')" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium shadow-lg">
                            <i class="fas fa-edit mr-2"></i>编辑视频
                        </button>
                    </div>
                </div>

                <!-- Announcement Module -->
                <div class="bg-white rounded-lg p-4 relative group">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-bullhorn text-purple-600 mr-2"></i>
                        <h4 class="text-sm font-medium">店铺公告</h4>
                    </div>
                    <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-3">
                        <p class="text-xs text-gray-700">🎉 新年大促销活动正在进行中，全场商品8折起，满299元包邮！活动时间有限，快来抢购吧！</p>
                    </div>
                    <div class="edit-overlay">
                        <button onclick="editModule('announcement')" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium shadow-lg">
                            <i class="fas fa-edit mr-2"></i>编辑公告
                        </button>
                    </div>
                </div>
            </div>

            <!-- Store Footer -->
            <div class="bg-gray-800 text-white text-center py-8">
                <div class="mb-4">
                    <img src="https://images.unsplash.com/photo-1707061229170-fc232a07a55f?q=80&w=100&auto=format&fit=crop" 
                         alt="店铺Logo" class="w-12 h-12 mx-auto rounded-full mb-2">
                    <h3 class="text-sm font-medium">潮流数码旗舰店</h3>
                    <p class="text-xs text-gray-400 mt-1">专注优质商品，为您提供最好的购物体验</p>
                </div>
                <div class="flex justify-center space-x-6 text-xs">
                    <a href="#" class="text-gray-400 hover:text-white">联系客服</a>
                    <a href="#" class="text-gray-400 hover:text-white">售后服务</a>
                    <a href="#" class="text-gray-400 hover:text-white">帮助中心</a>
                </div>
                <p class="text-xs text-gray-500 mt-4">© 2025 潮流数码旗舰店. 保留所有权利.</p>
            </div>
        </div>

        <!-- Fixed Bottom Action Bar -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex space-x-3">
                <button onclick="goBack()" class="bg-gray-100 text-gray-700 font-medium px-6 py-3 rounded-xl hover:bg-gray-200 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>返回编辑
                </button>
                <button onclick="publishStore()" class="flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200">
                    <i class="fas fa-rocket mr-2"></i>发布上线
                </button>
            </div>
        </div>
    </div>

    <script>
        let editMode = false;
        let currentBannerIndex = 0;
        const bannerImages = [
            'https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=393&h=200&fit=crop',
            'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=393&h=200&fit=crop',
            'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=393&h=200&fit=crop'
        ];

        // Auto banner rotation
        function rotateBanner() {
            currentBannerIndex = (currentBannerIndex + 1) % bannerImages.length;
            document.getElementById('bannerImage').src = bannerImages[currentBannerIndex];
            
            // Update indicators
            const indicators = document.querySelectorAll('.w-2.h-2.bg-white.rounded-full');
            indicators.forEach((indicator, index) => {
                indicator.style.opacity = index === currentBannerIndex ? '1' : '0.5';
            });
        }

        // Toggle edit mode
        function toggleEditMode() {
            editMode = !editMode;
            const statusElement = document.getElementById('editModeStatus');
            const editBtn = document.getElementById('editModeBtn');
            const previewContent = document.getElementById('previewContent');
            
            if (editMode) {
                statusElement.textContent = '编辑模式';
                editBtn.innerHTML = '<i class="fas fa-eye text-lg"></i>';
                previewContent.classList.add('preview-mode');
                showToast('已切换到编辑模式，悬停组件可编辑');
            } else {
                statusElement.textContent = '预览模式';
                editBtn.innerHTML = '<i class="fas fa-edit text-lg"></i>';
                previewContent.classList.remove('preview-mode');
                showToast('已切换到预览模式');
            }
        }

        // Edit section functions
        function editSection(sectionType) {
            if (!editMode) {
                showToast('请先切换到编辑模式');
                return;
            }

            const sectionMap = {
                'banner': 'banner-edit.html',
                'navigation': 'navigation-edit.html',
                'coupon': 'coupon-area-edit.html',
                'product': 'product-display-edit.html'
            };

            if (sectionMap[sectionType]) {
                showToast(`正在跳转到${sectionType}编辑页面...`);
                setTimeout(() => {
                    window.location.href = sectionMap[sectionType];
                }, 1000);
            }
        }

        function editModule(moduleType) {
            if (!editMode) {
                showToast('请先切换到编辑模式');
                return;
            }

            showToast(`正在编辑${moduleType}模块...`);
            setTimeout(() => {
                showToast('模块编辑功能开发中');
            }, 1000);
        }

        function switchDevice() {
            showToast('桌面版预览功能开发中');
        }

        function sharePreview() {
            if (navigator.share) {
                navigator.share({
                    title: '店铺预览',
                    text: '查看我的店铺装修效果',
                    url: window.location.href
                });
            } else {
                // Fallback for browsers that don't support Web Share API
                const url = window.location.href;
                navigator.clipboard.writeText(url).then(() => {
                    showToast('预览链接已复制到剪贴板');
                }).catch(() => {
                    showToast('分享功能暂不可用');
                });
            }
        }

        function goBack() {
            window.location.href = 'b2b-store-decoration.html';
        }

        function publishStore() {
            if (confirm('确认发布店铺吗？\n\n发布后店铺将对外展示，建议先仔细检查各项设置。')) {
                showToast('正在发布店铺...');
                setTimeout(() => {
                    showToast('店铺发布成功！');
                    setTimeout(() => {
                        showToast('您的店铺现在可以被顾客访问了');
                    }, 1500);
                }, 2000);
            }
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('店铺预览已加载');
            
            // Start banner rotation
            setInterval(rotateBanner, 5000);
            
            // Simulate loading content
            setTimeout(() => {
                showToast('提示：点击右上角编辑按钮可切换编辑模式');
            }, 3000);
        });
    </script>
</body>
</html>